<template>
  <div id="list" @click="clickImage">
    <Row class="px-3 py-2 d-flex align-items-center border-bottom">
      <Col span="12" class="d-flex align-items-center justify-content-between">
        <div class="d-flex align-items-center">
          <Checkbox
            v-model="item.checked"
            class="mr-0 mb-0"
            @on-change="changeSingle"
          ></Checkbox>
          <i class="iconfont mx-3" :class="iconLeft" style="fontSize:28px"></i>
          <span class="small">{{ item.name }}</span>
        </div>
        <div class="text-primary icon-box">
          <Tooltip content="分享" placement="bottom">
            <Icon type="md-share" size="18" class="icons" />
          </Tooltip>
          <Tooltip content="分享" placement="bottom" class="mx-2">
            <Icon type="md-cloud-download" size="18" class="icons" />
          </Tooltip>
          <Dropdown class="mr-2">
            <Icon type="ios-more" size="18" class="icons" />
            <DropdownMenu slot="list">
              <DropdownItem @click.native="rename">重命名</DropdownItem>
              <DropdownItem @click.native="del">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </div>
      </Col>
      <Col span="6">-</Col>
      <Col span="6">{{ item.create_time }}</Col>
    </Row>
  </div>
</template>

<script>
// 定义图标
let icons = {
  dir: {
    icon: "icon-file-b-2",
    color: "text-warning",
  },
  image: {
    icon: "icon-file-b-6",
    color: "text-success",
  },
  video: {
    icon: "icon-file-b-9",
    color: "text-primary",
  },
  text: {
    icon: "icon-file-s-7",
    color: "text-info",
  },
  none: {
    icon: "icon-file-b-8",
    color: "text-muted",
  },
};
export default {
  props: ["item", "index"],
  data() {
    return {};
  },
  methods: {
    // 复选框
    changeSingle(e) {
      this.$emit("changeSingle", {
        type: "checked",
        index: this.index,
        value: e,
      });
    },
    // 删除
    del() {
      this.$Modal.confirm({
        title: "提示",
        content: "是否要删除当前选中",
        onOk: () => {
          this.$Message.success("已删除");
          this.$emit("changeSingle", {
            type: "delete",
            index: this.index,
          });
        },
      });
    },
    // 重命名
    rename() {
      this.$emit("changeSingle", {
        type: "rename",
        index: this.index,
      });
    },
    // 图片缩放
    clickImage() {
      if (this.item.type == "image") {
        this.$emit("changeSingle", {
          type: "image",
          url: this.item.url,
        });
      }
    },
  },
  // 图标
  computed: {
    iconLeft() {
      return `${icons[this.item.type].icon} ${icons[this.item.type].color}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.icons {
  cursor: pointer;
}
.icon-box {
  display: none;
}
.ivu-row:hover {
  background-color: rgba(45, 140, 240, 0.1);
}
.ivu-row:hover .icon-box {
  display: flex;
}
</style>
